<template>
  <div id="swiper-zyhd">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          @click="toPath(item)"
          v-for="(item,index) in imglist"
          :key="index"
        >
          <div>
            <div class="box_item">
              <img :src="item.ImgUrl" />
              <p>{{item.Name}}</p>
              <div>
                <span>￥{{item.Price}}</span>
                <span>/{{item.Size}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["imglist"],
  mounted() {
    //https://res.bestcake.com/m-images/ww/ns/洛可可甜心.jpg?v=636989034766311200
    //   console.log(this.imglist)
    this.pageInit();
  },

  methods: {
    pageInit() {
      var swiper = new Swiper(".swiper-container", {
        pagination: ".swiper-pagination",
        slidesPerView: "auto",
        spaceBetween: 0,
        freeMode: true
      });
    },
    toPath(item) {
       console.log(item);
      this.$router.push({
        path: "/show",
        query: {
          City: this.$store.state.city,
          SupplyNo: item.SupplyNo,
          Name: item.Name,
          id: item.Id
        }
      });
      //query  {City: "上海",SupplyNo:"",Name:"xxxx",id:"1878"}
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#swiper-zyhd {
  background: #fafafa;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  .swiper-wrapper {
    height: r(256);
    border-left: r(6) solid #fafafa;
  }
}
.swiper-slide {
  height: r(256);
  width: r(168);
  /* text-align: center; */
  font-size: r(14);
  background: #fafafa;

  /* Center slide text vertically */
  /* display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; */
  div {
    /* background: #fafafa; */
    .box_item {
      box-sizing: border-box;
      border-top: r(15) solid #fff;
      background: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      border-radius: r(6);
      height: r(220);
      width: r(156);
      margin: r(12) r(12) r(24) 0;

      img {
        width: r(120);
        height: r(120);
      }
      p {
        color: #333;
        text-align: left;
        width: r(118.125);
        height: r(40);
        margin: r(5.003) r(18.938) 0;
      }
      div {
        text-align: left;
        width: r(118.125);
        margin: 0 auto;
        span:nth-child(1) {
          color: #cc2825;
        }
        span:nth-child(2) {
          color: #999;
        }
      }
    }
  }
}
</style>
